<template>
  <div class="auctionGoods">
    <div
      class="shoppingShow"
      @click="$router.push(`/goodsDetail?id=${auctionGoods.id}&productType=1`)"
      v-for="(auctionGoods,auction) in auctionGoods"
      :key="auction"
    >
      <img :src="auctionGoods.mainPic" class="goodsShow" />
      <div class="shoppingShowRight">
        <p class="goodsTitle">{{auctionGoods.productName}}</p>
        <span class="goodslabel">{{auctionGoods.productGrade}}级</span>
        <span class="goodslabel">{{auctionGoods.productOpenness}}度开放</span>
        <span class="goodslabel">{{auctionGoods.productLength}}</span>
        <span class="goodslabel">{{auctionGoods.onlineRange}}{{auctionGoods.flowerUnit}}</span>
        <div class="goodsMarket">
          <span class="market">市场均价:￥{{auctionGoods.averagePrice}}元</span>
          <span class="inventory">仅剩{{auctionGoods.productStock}}件</span>
        </div>
        <span class="goodsPrice">￥{{auctionGoods.purchasePrice}}元/束</span>
        <span class="goodsGroup">参与竞拍</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "auctionGoods",
  props: {
    auctionGoods: {
      type: Array,
      default: []
    }
  }
};
</script>

<style scoped>
.auctionGoods {
  background-color: rgba(247, 249, 252, 1);
}
.shoppingShow {
  width: 100%;
  display: flex;
  text-align: center;
  margin-top: 10px;
  background-color: #fff;
}
.goodsShow {
  width: 112px;
  height: 112px;
  vertical-align: middle;
  margin-left: 10px;
  margin-top: 20px;
  flex: 0.5;
}
.shoppingShowRight {
  margin-left: 13px;
  vertical-align: middle;
  flex: 1;
}
.goodsTitle {
  font-size: 14px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  line-height: 18px;
  white-space: nowrap;
}
.goodslabel {
  background: #f7f9fc;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(169, 173, 191, 1);
  line-height: 18px;
  margin: 0 5px;
  padding: 2px;
  text-align: center;
}
.goodsMarket {
  margin-top: 14px;
}
.market {
  background: #fff0e6;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 97, 0, 1);
  line-height: 18px;
  width: 130px;
}
.inventory {
  font-size: 10px;
  font-weight: 500;
  color: rgba(169, 174, 192, 1);
  margin-left: 36px;
}
.goodsPrice {
  font-size: 18px;
  font-weight: bold;
  color: rgba(255, 98, 0, 1);
  line-height: 50px;
}

.goodsGroup {
  font-size: 12px;
  background: rgba(0, 198, 87, 1);
  border-radius: 5px;
  padding: 5px;
  color: #fff;
  margin-left: 80px;
}
</style>
